import 'package:flutter/material.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:flutter_app/utils/windowUtil.dart';
import 'package:flutter_app/widget/AppBarTemp1.dart';
class YunPinCang extends StatefulWidget {
  @override
  State<YunPinCang> createState() => _YunPinCangState();
}

class _YunPinCangState extends State<YunPinCang> with AutomaticKeepAliveClientMixin{
  List<String> image = [
    "images/banner1.png",
    "images/banner2.png",
    "images/banner3.png"
  ];
  @override
  bool get wantKeepAlive => true;
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffffffff),
        appBar: AppBarTemp1(child:

        Container(
          margin: EdgeInsets.only(left: 10.0, top:10.0,bottom:10.0,right: 10.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: <Widget>[
              Text(
                "云品仓",
                style: TextStyle(
                    fontSize: 18.0,
                    color: Color(0xff121212),
                    fontWeight: FontWeight.bold),
              ),
              Container(
                width: 103.0,
                height: 35.0,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20.0),
                    border: Border.all(color: Color(0xffededed))),
                child: Row(
                  children: <Widget>[
                    Container(
                      width: 50.0,
                      height: 40.0,
                      child: Image.asset("images/menu.png"),
                    ),
                    Container(
                      height: 30.0,
                      width: 1.0,
                      color: Color(0xffededed),
                    ),
                    Container(
                      width: 50.0,
                      height: 40.0,
                      padding: EdgeInsets.only(
                          top: 10.0, bottom: 10.0, left: 5.0, right: 5.0),
                      child: Image.asset(
                        "images/round.png",
                        width: 20.0,
                        height: 20.0,
                      ),
                    )
                  ],
                ),
              )
            ],
          ),
        ),
        ),
      body: new ListView(
        padding: EdgeInsets.only(top: 20.0),
        children: <Widget>[

          Container(
            margin: EdgeInsets.only(left: 10.0, right: 10.0, top: 20.0),
            child: Row(
              children: <Widget>[
                Expanded(
                  child: Container(
                    width: 120.0,
                    height: 40.0,
                    padding:
                        EdgeInsets.only(top: 10.0, left: 10.0, bottom: 10.0),
                    decoration: BoxDecoration(
                        border: Border.all(
                          color: Color(0xffececec),
                        ),
                        borderRadius: BorderRadius.circular(18.0),
                        color: Color(0xfff2f2f2)),
                    child: Row(
                      children: <Widget>[
                        Image.asset("images/search2.png"),
                        Expanded(
                            child: TextField(
                          style: TextStyle(color: Color(0xffffffff)),
                          onTap: () {
                            // FocusScope.of(context).requestFocus(focusNode);
                          },
                          enabled: true,
                          onSubmitted: (s) {
                            print("finish");
                          },
                          textInputAction: TextInputAction.go,
                          decoration: InputDecoration(
                            contentPadding:
                                EdgeInsets.only(left: 10.0, top: 5.0),
                            hintText: "搜索商品",
                            hintStyle: TextStyle(
                              color: Colors.grey,
                            ),
                            labelStyle: TextStyle(color: Color(0xffffffff)),

//                     enabledBorder: OutlineInputBorder(
//                       /*边角*/
//                       borderRadius: BorderRadius.all(
//                         Radius.circular(30), //边角为30
//                       ),
//                       borderSide: BorderSide(
//                         color: Colors.white, //边线颜色为黄色
//                         width: 2, //边线宽度为2
//                       ),
//                     ),
//                     focusedBorder: OutlineInputBorder(
//                         borderRadius: BorderRadius.all(
//                           Radius.circular(30), //边角为30
//                         ),
//                         borderSide: BorderSide(
//                           color: Colors.white, //边框颜色为绿色
//                           width: 2, //宽度为5
//                         )),
                            border: InputBorder.none,
                            // errorText: "errorText",

                            hasFloatingPlaceholder: false,
                          ),
                        ))

                      ],
                    ),
                  ),
                ),
                SizedBox(
                  width: 10.0,
                ),
                Container(
                  width: 25.0,
                  child: Column(
                    children: <Widget>[
                      Image.asset("images/search3.png"),
                      Text(
                        "分类",
                        style: TextStyle(fontSize: 12.0),
                      )
                    ],
                  ),
                )
              ],
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 10.0),
            height: 110.0,
            child: buildc(),
          ),
          Container(margin: EdgeInsets.all(10.0),
          child: Row(
             
            children: <Widget>[
              Image.asset("images/roundselect.png",width: 20.0,height: 20.0,),
              Text("唯品会正品保证",style: TextStyle(fontSize: 12.0,color: Colors.grey),),
              Expanded(child: Text("")),
              Image.asset("images/roundselect.png",width: 20.0,height: 20.0,),
              Text("限时包邮",style: TextStyle(fontSize: 12.0,color: Colors.grey),),
              Expanded(child: Text("")),
              Image.asset("images/roundselect.png",width: 20.0,height: 20.0,),
              Text("7天放心退",style: TextStyle(fontSize: 12.0,color: Colors.grey),),
              Expanded(child: Text("")),
              Image.asset("images/roundselect.png",width: 20.0,height: 20.0,),
              Text("假一赔十",style: TextStyle(fontSize: 12.0,color: Colors.grey),),


            ],

          ),

          ),
          Container(height: 5.0,color: Color(0xffeeeeee),),
          Container(
            padding: EdgeInsets.only(left:10.0,top: 20.0,right: 10.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text("品牌特卖",style: TextStyle(color: Color(0xff121212),fontSize: 20.0,fontWeight: FontWeight.bold),),
                SizedBox(height: 30.0,),
                Row(children: <Widget>[
                  Text("走心推荐 "),
                  Container(width: 1.0,color: Colors.grey,height: 15.0,),
                  Text(" 清仓特卖"),


                ],),
                SizedBox(height: 20.0,),
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: <Widget>[

                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,

                       children: <Widget>[
                         Image.asset("images/shop.png",width: (windowUtil.width-40.0)/4.0,fit: BoxFit.fitWidth,),
                         SizedBox(height: 10.0,),
                         Container(width: (windowUtil.width-20.0)/4.0,child: Text("相宜本草，兰蔻精华，洗发水",overflow: TextOverflow.ellipsis,),)
                         ,
                         Container(
                           decoration: BoxDecoration(borderRadius: BorderRadius.circular(2.0),border: Border.all(color: Colors.red,width: 1.0)),
                           child: Text("只要9.9",style: TextStyle(color: Colors.red),),
                         ),
                         Row(
                           children: <Widget>[
                             Text(
                               "¥9",
                               style: TextStyle(
                                   color: Color(0xffe49f95), fontSize: 13.0),
                             ),
                             Text(
                               "¥9",
                               style: TextStyle(
                                   color: Colors.grey,
                                   fontSize: 13.0,
                                   decoration: TextDecoration.lineThrough,
                                   decorationColor: Colors.grey),
                             )
                           ],
                         ),
                       ],


                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                       children: <Widget>[
                         Image.asset("images/shop.png",width: (windowUtil.width-40.0)/4.0,fit: BoxFit.fitWidth,),
                         SizedBox(height: 10.0,),
                         Container(width: (windowUtil.width-20.0)/4.0,child: Text("相宜本草，兰蔻精华，洗发水",overflow: TextOverflow.ellipsis,),)
                         ,
                         Container(
                           decoration: BoxDecoration(borderRadius: BorderRadius.circular(2.0),border: Border.all(color: Colors.red,width: 1.0)),
                           child: Text("只要9.9",style: TextStyle(color: Colors.red),),
                         ),
                         Row(
                           children: <Widget>[
                             Text(
                               "¥9",
                               style: TextStyle(
                                   color: Color(0xffe49f95), fontSize: 13.0),
                             ),
                             Text(
                               "¥9",
                               style: TextStyle(
                                   color: Colors.grey,
                                   fontSize: 13.0,
                                   decoration: TextDecoration.lineThrough,
                                   decorationColor: Colors.grey),
                             )
                           ],
                         ),
                       ],


                    ),
                    Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                       children: <Widget>[
                         Image.asset("images/shop.png",width: (windowUtil.width-20.0)/4.0,fit: BoxFit.fitWidth,),
                         SizedBox(height: 10.0,),
                         Container(width: (windowUtil.width-40.0)/4.0,child: Text("相宜本草，兰蔻精华，洗发水",overflow: TextOverflow.ellipsis,),)
                         ,
                         Container(
                           decoration: BoxDecoration(borderRadius: BorderRadius.circular(2.0),border: Border.all(color: Colors.red,width: 1.0)),
                           child: Text("只要9.9",style: TextStyle(color: Colors.red),),
                         ),
                         Row(
                           children: <Widget>[
                             Text(
                               "¥9",
                               style: TextStyle(
                                   color: Color(0xffe49f95), fontSize: 13.0),
                             ),
                             Text(
                               "¥9",
                               style: TextStyle(
                                   color: Colors.grey,
                                   fontSize: 13.0,
                                   decoration: TextDecoration.lineThrough,
                                   decorationColor: Colors.grey),
                             )
                           ],
                         ),
                       ],


                    ),


                  ],
                )

              ],

            ),
          )

        ],
      ),
    );
  }

  Widget buildc() {
    return new Swiper(
      itemBuilder: (BuildContext context, int index) {
        return new Container(
          margin: EdgeInsets.only(left: 10.0, right: 10.0),
          child: new Image.asset(image[index],
              fit: BoxFit.fill,
              height: MediaQuery.of(context).size.height * 0.2),
        );
      },
      itemCount: image.length,
      viewportFraction: 0.8,
      autoplay: true,
      onIndexChanged: (int s) {
        //  index = s;
        setState(() {});
      },
      pagination:
////          new SwiperPagination(builder: SwiperPagination.fraction),
          new SwiperPagination(
              builder: DotSwiperPaginationBuilder(
        color: Colors.black54,
        activeColor: Colors.white,
      )),
    );
  }
}
